dpi = 320/480
normal-font = 20px * dpi
.ui-mobile-rendering > *
  visibility: hidden
.ui-page
  padding-top: 50px !important
  padding-bottom: 40px !important

img.icon
  border-radius: 10px 10px
  -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3)
  width: 96px*dpi
  height: 96px*dpi

div.loader
  background: #CCC url(../imgs/icon_logo.png) 50% 50% no-repeat
  text-indent: -99em
  width: 100%
  height: 100%

.btn
  &:hover
    color: #BBB
  &:focus
    color: #BBB

.well
  margin: 10px

.list-group
  margin-bottom: 0

.list-group-item.media
  margin-top: 0px

.list-group-item
  &:first-child
    border-top-right-radius: 0px
    border-top-left-radius: 0px
  &:last-child
    border-bottom-right-radius: 0px
    border-bottom-left-radius: 0px

.navbar-nav
  margin: 0px
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#444444),color-stop(50%,#3d3d3d),color-stop(100%,#373737));
  &>li
    border-left: 1px solid #555
    border-right: 1px solid #363636
    &:first-child
      border-left: none
    &:last-child
      border-right: none
    &>a
      border-radius: 0px
      color: #888
      padding: 14px 0
      font-size: 25px * dpi
      text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1)
      &:hover
        color: #888
      &:focus
        color: #888
  &>li.active
    border-right: none
    border-left: none
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#323232),color-stop(100%,#535353))
    &>a
      color: #fff
      background-color: transparent
      &:hover
        color: #fff
        background-color: transparent
      &:focus
        color: #fff
        background-color: transparent

.navbar-inverse
  background: #a00c08
  border-bottom: 1px solid #df110c
  .navbar-brand
    font-size: 34px * dpi
    display: block
    color: #FFF

.control-group + .control-group
  margin-top: 10px

i.star
  text-indent: -99em
  display: inline-block
  width: 19px * dpi
  height: 17px * dpi
  line-height: 22px * dpi
  background-image: url(../imgs/star.png)
  background-size: 19px * dpi 17px * dpi
  &.empty
    background-image: url(../imgs/empty_star.png)
    background-size: 19px * dpi 17px * dpi

.banner
  img
    display: block
    width: 100%
  ul#advs
    margin: 0px
    padding: 0px
    list-style: none
    li
      text-align: center
      a
        display: block
        img
          width: 100%
          display: block
  ul.nav
    position:absolute
    z-index:100
    top:330px*dpi
    height:12px
    left:50%
    background:rgba(0,0,0,0.4)
    padding:0
    margin:0 0 0 -12px
    -webkit-border-radius:5px
    li
      display:block
      float:left
      width:6px
      height:6px; line-height:6px
      -webkit-border-radius:3px
      background:rgba(255,255,255,0.3)
      overflow:hidden
      padding:0
      margin:3px 3px 0
      text-align:center
      &.selected
        background:rgba(255,255,255,0.6)
        
ul.nav
  li
    float: left
    a
      text-align:center
  &.num2 li
    width: 50%
  &.num3 li
    width: 33.333%
  &.num4 li
    width: 25%
  &.num5 li
    width: 20%

ul.table
  list-style: none
  margin: 25px*dpi 0px 0px 10px*dpi
  padding: 0px
  zoom: 1
  &::after
    content: ''
    clear: both
    display: block
  li
    float: left
    display: inline
    text-align: center
    margin: 6px*dpi 0px
    img.icon
      margin: 0px
      float: none
      border-radius: 10px 10px
      -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3)
      width: 96px*dpi
      height: 96px*dpi
    p
      margin-top: 5px
      display: block
      text-overflow: ellipsis
      overflow: hidden
      white-space: nowrap

.subbar
  padding: 10px*dpi
  margin: 0px
  background-image: url(../imgs/sub_bg.jpg)
  background-size: 17px*dpi 57px*dpi
  &#search_bar input
    font-size: 26px*dpi
    border-radius: 30px*dpi
    width: 100%
    height: 40px
    padding: 10px*dpi
    background: #fff url(../imgs/search_bg.png) 97% center no-repeat
    background-size: 33px*dpi 33px*dpi
    box-sizing: border-box
    border: 1px solid rgba(0, 0, 0, .2)
    box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1)
    -webkit-appearance: none

div#game_info
  display: block
  #content
    margin-bottom: 50px*dpi
  #loader
    width: 100%
    height: 150px
    background: #FFF url(../imgs/icon_logo.png) 50% 50% no-repeat
    text-indent: -99em
  #info
    display: block
    padding: 8px*dpi 10px*dpi 6px*dpi
    min-height: 130px*dpi
    img.icon
      display: block
      margin: 20px*dpi auto
      border-radius: 10px 10px
      -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3)
      width: 300px*dpi
      height: 300px*dpi
    p
      color: #666
      line-height: 26px*dpi
      b
        font-size: 26px*dpi
        padding-top: 7px*dpi
        display: block
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        color: #000
    .ext_info
      .red
        font-size: 1.5em
        font-weight: bold
        color: red
  h4
    margin: 10px 0px 10px
    padding: 6px 10px 5px
    color: #000
    background: #eee
    font-size: 24px * dpi
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.4)
  div#infos
    padding: 2px 5px
    ul
      list-style: none
      padding: 0px
      zoom: 1
      margin: 2px 6px
      &::after
        content: ''
        clear: both
        display: block
      li
        width: 33.333%
        float: left
        display: inline-block
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        margin: 5px 0
        b
          margin-right: 5px
  div#screen_shots
    width: 100%
    ul.gallery
      list-style: none
      padding: 0px
      zoom: 1
      margin: 2px 6px
      &::after
        content: ''
        clear: both
        display: block
      li
        width: 100%
        float: left
        display: inline
        text-align: center
        img
          width: 96%
          background: #CCC url(../imgs/icon_logo.png) 50% 50% no-repeat
  div#evaluator
    background: #E1EFF8
    border-radius: 5px
    margin: 6px 8px
    min-height: 72px
    p
      padding: 6px
      text-shadow: 1px 1px 1px #FFF
      font-size: 20px * dpi
    .avatar
      float: right
      background: #0D7EE4
      border-radius: 5px
      height: 62px
      text-align: center
      padding: 5px
      margin-left: 5px
      -webkit-box-shadow: -2px 0px 4px rgba(0,0,0,.4)
      &::before
        content: ' '
        position: absolute
        width: 8px
        height: 8px
        background: #0D7EE4
        margin: 20px 0px 0px -9px
        -webkit-transform: rotate(45deg);
        -webkit-box-shadow: -2px 2px 2px rgba(0,0,0,.2)
      img
        width: 48px
        height: 48px
      span
        display: block
        font-size: 8pt
        color: #FFF

